<template>
    <div class="">
        <div style="position: fixed;background: #FFF;width: 500px;top: 0px;">
        <van-icon name="arrow-left" @click="goBack" style="top: 18px;"/>
        <p style="left: 10px;text-align: center;width: 80%;">歌手详情</p>
        </div>
        <div class="cotent">
         <div class="b">
        <h3 class="h3" style="top: 40px;">歌手介绍</h3>   
        </div> 
        <img class="a" :src="liuyan.singer_pic" alt=""> 
        <br>
        <div class="test-scroller">
        <p class="text">{{singerUrl.desc}}</p>
        </div>
        <br>
        <h3 class="h3">{{courseUrl.key}}</h3>
        <br>
        <div class="test-scroller">
        <p class="text">{{courseUrl.value}}</p>
        </div>
        <br>
        <h3 class="h3">{{honorUrl.key}}</h3>
        <br>
        <div class="test-scroller">
        <p class="text">{{honorUrl.value}}</p>
        </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            singerUrl:"",
            courseUrl:"",
            honorUrl:"",
            liuyan:""
        };
    },
    created(){
        this.getData();
        this.getStoreSingerUrl();
    },
    methods:{
        getData(){
            axios.get("/api/singer/desc",{
                params:{
                    singermid:this.$route.params.id,
                }
            })
            .then(res => {
                console.log(res.data.data)
                this.singerUrl=res.data.data
                console.log(res.data.data.other.item);
                this.courseUrl=res.data.data.other.item[0]
                this.honorUrl=res.data.data.other.item[1]
            })
            .catch(err => {
                console.error(err); 
            })
        },
        getStoreSingerUrl(){
            console.log(this.$store.getters.liuyan);
            this.liuyan=this.$store.getters.liuyan
        },
        goBack() {
          this.$router.go(-1);
        },
       
    }
}
</script>

<style scoped>
 .van-icon{
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 999;
  font-size: 30px;
}
.text{
    white-space: pre-wrap;
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    line-height: 30px;
    margin-left: 10px;

}
.h3{
    position: relative;
    text-align: left;
    margin-left: 10px;
    margin-top: 5px;
}
.a{
   float: left;
   padding-top: 50px;
   padding-left: 10px;
   padding-right: 10px;
}
.test-scroller {
  -webkit-overflow-scrolling: touch;
  height: 15rem;
  overflow: scroll;
}
.cotent{
    margin-top: 25px;
}
.b{
   height: 70px;
}
</style>